<template>
  <v-chart :autoresize="true" :manual-update="true" class="chart"
           theme="shine"
           ref="chart"/>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue';
import {getOilsRise, saleProportion} from '@/api/dataScreen';
import dayjs from "dayjs";

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      list = [] as any;
      legendData = [] as any;
      seriesData = [] as any;
    });

    const chart = ref();

    const initOptions = {
      tooltip: {
        trigger: 'item',
        formatter(params) {
          return params.value + '万元,占比:' + params.percent + '%';
        }
      },
      // visualMap: {
      //   show: false,
      //   min: 80,
      //   max: 600,
      //   inRange: {
      //     colorLightness: [0, 1]
      //   }
      // },
      series: [
        {
          type: 'pie',
          radius: '55%',
          center: ['50%', '40%'],
          roseType: 'radius',
          label: {
            color: '#fff',
            fontSize: '0.65rem',
          },
          labelLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            smooth: 0.2,
            length: 10,
            length2: 20
          },
          // itemStyle: {
          //   color: '#c23531',
          //   shadowBlur: 200,
          //   shadowColor: 'rgba(0, 0, 0, 0.5)'
          // },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    }

    async function getData(stationCode: number,searchDate) {
      state.list = await getOilsRise(stationCode, dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'));
      if (state.list && state.list[0]) {
        dealChartData();
      }
    }

    function dealChartData() {
      state.legendData = [];
      state.seriesData = [];
      for (let item of state.list) {
        state.legendData.push(item['油品名称']);
        state.seriesData.push(
            {value: item['区间实收金额(万元)'], name: item['油品名称']}
        );
      }
      state.seriesData.sort(function (a, b) {
        return a.value - b.value;
      })
      // initOptions.legend['data'] = state.legendData;
      initOptions.series[0]['data'] = state.seriesData;
      chart.value.setOption(initOptions);
    }

    return {
      getData,
      chart
    }
  }
});
</script>

<style scoped>

</style>
